<template>
	<view class="home">
		<custom-navbar :title="policyDetail.title || '政策项目详情'" :show-back="true" @back="handleBack" />

		<view class="content p30" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="p30 mt30 policy">
				<!-- 标题和基本信息 -->
				<view class="f36bc0 mb20" style="line-height: 50rpx;">{{ policyDetail.policy_title }}</view>
				<view class="f245c9 mb8">发布：{{ policyDetail.create_time }}</view>
				<view class="f245c9 mb28">
					申报：{{ policyDetail.application_start_time }}-{{ policyDetail.application_end_time }}</view>

				<up-line margin='40rpx 0 40rpx 0'></up-line>
				<mp-html :content="policyDetail.application_conditions" />
				<!-- 项目类别 -->
				<!-- 			<view class="mb60 w100" v-if="policyDetail.categories && policyDetail.categories.length">
					<view class="f306c3">项目类别</view>
					<view class="item-container">
						<view v-for="(item,index) in policyDetail.categories" :key="index" class="item">
							<view class="f265c3">{{ item }}</view>
						</view>
					</view>
				</view> -->

				<!-- 适用产业 -->
				<!-- 		<view class="mb60 w100"
					v-if="policyDetail.applicableIndustries && policyDetail.applicableIndustries.length">
					<view class="f306c3">适用产业</view>
					<view class="item-container">
						<view v-for="(item,index) in policyDetail.applicableIndustries" :key="index" class="item">
							<view class="f265c3">{{ item }}</view>
						</view>
					</view>
				</view> -->

				<!-- 其他条件 -->
				<!-- 	<view class="mb60 w100" v-if="policyDetail.otherConditions && policyDetail.otherConditions.length">
					<view class="f306c3">其他条件</view>
					<view class="item-container">
						<view v-for="(item,index) in policyDetail.otherConditions" :key="index" class="item">
							<view class="f265c3">{{ item }}</view>
						</view>
					</view>
				</view> -->

				<!-- 申报条件 -->
				<!-- 			<view class="mb60 w100" v-if="policyDetail.applicationConditions">
					<view class="f306c3">申报条件</view>
					<view class="f24c3 white-space-pre-line">{{ policyDetail.applicationConditions }}</view>
				</view> -->

				<!-- 支持力度 -->
				<!-- <view class="mb60 w100" v-if="policyDetail.supportLevel">
					<view class="f306c3">支持力度</view>
					<view class="f24c3">{{ policyDetail.supportLevel }}</view>
				</view> -->

				<!-- 申报材料 -->
				<!-- 			<view class="mb60 w100"
					v-if="policyDetail.applicationMaterials && policyDetail.applicationMaterials.length">
					<view class="f306c3">申报材料</view>
					<view class="f24c3">
						<view v-for="(item, index) in policyDetail.applicationMaterials" :key="index" class="mb10">
							{{ index + 1 }}. {{ item }}
						</view>
					</view>
				</view> -->

				<!-- 申报流程 -->
				<!-- 	<view class="mb60 w100" v-if="policyDetail.process">
					<view class="f306c3">申报流程</view>
					<view class="f24c3 white-space-pre-line">{{ policyDetail.process }}</view>
				</view> -->
			</view>

			<!-- 加载状态 -->
			<!-- 	<view v-if="loading" class="loading-container">

				<view class="loading-text">加载中...</view>
			</view> -->

			<!-- 空状态 -->
			<!-- 		<view v-if="!loading && !policyDetail.id" class="empty-container">
				<view class="empty-text">暂无政策详情数据</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		matchingRuleDetail
	} from '@/api/policy'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path

	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()

	// 定义响应式数据
	const searchKey = ref('')
	const loading = ref(false)
	const policyDetail = ref({})

	// 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 获取路由参数
	const matching_id = ref(null)


	// 初始化
	onMounted(() => {

		setTimeout(() => {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const options = currentPage.options
			matching_id.value = options.matching_id
			fetchPolicyDetail()
		}, 100)
	})
	// 获取政策详情
	const fetchPolicyDetail = async () => {
		if (!matching_id.value) return

		loading.value = true
		try {

			const res = await matchingRuleDetail(matching_id.value)
			if (res.code === 200) {
				policyDetail.value = res.data
			} else {
				uni.showToast({
					title: res.message || '获取详情失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('获取政策详情失败:', error)
			uni.showToast({
				title: error.message || '网络错误',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	const handleBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f8fa;
		overflow: hidden;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			height: 100%;
			display: flex;
			flex-direction: column;

			.policy {
				background: #FFFFFF;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				.item-container {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;

					.item {
						padding: 12rpx 25rpx;
						background: #F6F6F6;
						border-radius: 6rpx;
					}
				}

				.white-space-pre-line {
					white-space: pre-line;
				}

				.mb10 {
					margin-bottom: 10rpx;
				}
			}

			.loading-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 60rpx 0;

				.loading-text {
					margin-top: 20rpx;
					color: #666;
					font-size: 28rpx;
				}
			}

			.empty-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 100rpx 0;

				.empty-image {
					width: 200rpx;
					height: 200rpx;
					opacity: 0.6;
				}

				.empty-text {
					margin-top: 20rpx;
					color: #999;
					font-size: 28rpx;
				}
			}
		}

		// 字体样式类
		.f36bc0 {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.f306c3 {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
		}

		.f265c3 {
			font-size: 26rpx;
			color: #555;
		}

		.f245c9 {
			font-size: 24rpx;
			color: #999;
		}

		.f24c3 {
			font-size: 24rpx;
			color: #333;
			line-height: 1.6;
		}
	}
</style>